<template>
  <div class="noticeList">
    <mu-appbar :z-depth="0" style="width: 100%;top:0" color="white" text-color="primary">
      <mu-button icon slot="left">
        <header-back></header-back>
      </mu-button>
      <mu-text-field v-model="title" color="primary" full-width solo
                     placeholder="请输入您要搜索的内容..."></mu-text-field>
      <mu-button icon slot="right" @click="refresh">
        <mu-icon value="search"></mu-icon>
      </mu-button>
    </mu-appbar>
    <div class="tag-title">
      <mu-tabs full-width center color="primary" indicator-color="deepOrange500" :value.sync="active">
        <mu-tab>我的公告</mu-tab>
        <mu-tab>案件公告</mu-tab>
      </mu-tabs>
    </div>
    <mu-container ref="container" class="load-more-wrap" v-if="active === 0">
      <mu-load-more @refresh="refresh()" :refreshing="refreshing" :loading="loading" @load="load()"
                    :loaded-all="loaded">
        <mu-list v-show="myNoticeShow" textline="two-line">
          <mu-paper round style="margin-bottom: 0.7rem" v-for="item in list" v-bind:key="item.id" :z-depth="0">
            <mu-list-item :key="item.id" :to="{name:'noticeInfo',query: {id:item.id}}">
              <mu-list-item-action>
                <mu-avatar color="primary">
                  <mu-icon value="notifications"></mu-icon>
                </mu-avatar>
              </mu-list-item-action>
              <mu-list-item-content>
                <mu-list-item-title>{{item.title}}</mu-list-item-title>
                <mu-list-item-sub-title>
                  发布时间：{{util.formatyyyyMMddDate(item.releaseTime)}}
                </mu-list-item-sub-title>
              </mu-list-item-content>
              <mu-list-item-action>
                <mu-list-item-after-text>{{item.type}}</mu-list-item-after-text>
              </mu-list-item-action>
            </mu-list-item>
          </mu-paper>
        </mu-list>
        <mu-sub-header v-show="!myNoticeShow" style="text-align: center">暂无</mu-sub-header>
      </mu-load-more>
    </mu-container>
    <mu-container ref="container" class="load-more-wrap" v-if="active === 1">
      <mu-load-more @refresh="refresh()" :refreshing="refreshing" :loading="loading" @load="load()"
                    :loaded-all="loaded">
        <mu-list v-show="caseNoticeShow" textline="two-line">
          <mu-paper round style="margin-bottom: 0.7rem" v-for="item in list" v-bind:key="item.id" :z-depth="0">
            <mu-list-item :key="item.id" :to="{name:'noticeInfo',query: {id:item.id}}">
              <mu-list-item-action>
                <mu-avatar color="primary">
                  <mu-icon value="notifications"></mu-icon>
                </mu-avatar>
              </mu-list-item-action>
              <mu-list-item-content>
                <mu-list-item-title>{{item.title}}</mu-list-item-title>
                <mu-list-item-sub-title>
                  发布时间：{{util.formatyyyyMMddDate(item.releaseTime)}}
                </mu-list-item-sub-title>
              </mu-list-item-content>
              <mu-list-item-action>
                <mu-list-item-after-text>{{item.type}}</mu-list-item-after-text>
              </mu-list-item-action>
            </mu-list-item>
          </mu-paper>
        </mu-list>
        <mu-sub-header v-show="!caseNoticeShow" style="text-align: center">暂无</mu-sub-header>
      </mu-load-more>
    </mu-container>
  </div>
</template>
<script>
  import headerBack from '@/components/headerBack';

  export default {
    name: 'noticeList',
    data() {
      return {
        caseNoticeShow: false,
        myNoticeShow: false,
        active: this.$route.query.active ? this.$route.query.active : 0,
        loaded: false,
        title: '',
        list: [],
        myNoticeList: [],
        caseNoticeList: [],
        num: 10,
        refreshing: false,
        loading: false,
        search: '',
        warning: '向上滑动查看更多'
      }
    },
    methods: {
      refresh() {
        this.refreshing = true;
        this.$refs.container.scrollTop = 0;
        setTimeout(() => {
          this.refreshing = false;
          this.num = 10;
          this.listData();
        }, 1000)
      },
      load() {
        this.loading = true;
        setTimeout(() => {
          this.num += 10;
          this.listData();
          this.loading = false;
        }, 1000)
      },
      listMyNotice() {
        const _self = this;
        let listPO = {
          size: this.num,
          current: 1,
          params: [{
            field: "fn.title",
            operator: "like",
            value: this.title
          }, {
            field: "fn.release_time",
            operator: "desc",
            value: ''
          }]
        };
        this.postRequest("/notice/listByUser", listPO).then(res => {
          if (res.code === 200) {
            if (res.data) {
              _self.myNoticeList = res.data.records;
              if (_self.myNoticeList && _self.myNoticeList.length > 0) {
                _self.myNoticeShow = true;
              } else {
                _self.myNoticeShow = false;
              }
            }
          }
        });
      },
      listCaseNotice() {
        const _self = this;
        let listPO = {
          size: this.num,
          current: 1,
          params: [{
            field: "fn.title",
            operator: "like",
            value: this.title
          }, {
            field: "fn.release_time",
            operator: "desc",
            value: ''
          }]
        };
        this.postRequest("/notice/listByCase", listPO).then(res => {
          if (res.code === 200) {
            if (res.data) {
              _self.caseNoticeList = res.data.records;
              if (_self.caseNoticeList && _self.caseNoticeList.length > 0) {
                _self.caseNoticeShow = true;
              } else {
                _self.caseNoticeShow = false;
              }
            }
          }
        });
      }
    },
    mounted: function () {
      this.listCaseNotice();
      this.listMyNotice();
    },
    components: {
      headerBack
    }
  }
</script>

<style scoped lang="less">

  .noticeList {
    position: fixed;
    top: 0;
    width: 100%;
    overflow: hidden;
    height: 100%;
    z-index: 999;
    background-color: #f9f9f9;
  }

  .tag-title {
    width: 100%;
    top: 3rem;
    height: 50px;
  }

  .load-more-wrap {
    width: 100%;
    height: 85%;
    overflow: scroll;
    .mu-appbar {
      width: 100%;
    }
  }

</style>
